<template>
  <div class="common-layout">
    <el-container>
      <el-header style="border-style: groove; border-width: 2px;margin-top: 25px;height: 450px;">
    <div class="common-layout">
      <el-container>
      <el-aside width="200px" style="margin-right: 50px;height: 400px;width: 380px;">
        <el-form v-model="Getbasic" style="margin-top: 25px;">
              <el-form-item>
<!--        <el-upload
    class="avatar-uploader"
    action="http://localhost:5219/api/Upload/Uplock"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
  > -->
    <img style="width: 310px;height: 320px;" v-if="Getbasic.coverImage" :src="Getbasic.coverImage" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
 <!--  </el-upload> -->
      </el-form-item>
    </el-form>
      </el-aside>
      <el-main >
<el-form :model="form" v-model="Getbasic" label-width="120" inline>
      
      <el-form-item label="商品名称" >
        :{{ Getbasic.goodsName }}
      </el-form-item>
      <br/>
      <el-form-item label="生产批次" >
        :{{ Getbasic.productionBatch }}
      </el-form-item>
       <br/>
       <el-form-item label="保质期（天）" >
        :{{ Getbasic.shelfLife }}
      </el-form-item>
       <br/>
      <el-form-item label="生产许可证号" >
         :{{ Getbasic.license }}
      </el-form-item>
       <br/>
       <el-form-item label="生产企业" >
        :{{ Getbasic.producer }}
      </el-form-item>
     
</el-form>
<div>
 <el-form>
   <el-form-item label="产品检验报告">

         <el-upload action="http://localhost:5219/api/Upload/Uplock" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file,)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
  </el-form-item>
 </el-form>
</div>
      </el-main>
 
     </el-container>
   </div>
      </el-header>
      <el-main style="border-style: groove; border-width: 2px;height: 1000px;margin-top: 15px;">
           <nav>
        
            <el-card style="width: 780px" shadow="hover">
               <el-badge  class="item" style="margin-left: 100px;">
              <RouterLink :to="{name:'Breeding',query:{productionBatch:route.query.productionBatch}}">养殖信息</RouterLink> 
              
              </el-badge>
              
              <el-badge  class="item" style="margin-left: 100px;">
                <RouterLink :to="{name:'Slaughter',query:{productionBatch:route.query.productionBatch}}">屠宰信息</RouterLink>
             
              </el-badge>

                <el-badge  class="item" style="margin-left: 100px;">
                  <RouterLink :to="{name:'DeepProcessing',query:{productionBatch:route.query.productionBatch}}">深加工信息</RouterLink>
       
              </el-badge>
           
           
            </el-card>
         <RouterView/>
         
         
      </nav>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted,watch } from 'vue'
import axios from 'axios'
import { useRouter,useRoute } from 'vue-router'
const router=useRouter();
const route=useRoute();
import { useCounterStore } from '@/stores/counter';
import { RouterLink, RouterView } from 'vue-router'
const store=useCounterStore();
import { type FormInstance, type FormRules,ElMessage,ElMessageBox } from 'element-plus'
onMounted(()=>{
GetBasicInformation();
})
const form = reactive<any>({
  basicInforId:0,
  goodsId: "",
  goodsName:"",
  productionBatch: "",
  shelfLife: "",
  license: "",
  completeness: "",
  producer: "",
  coverImage: "",
  creator:"",
  updator:""
})
const handleAvatarSuccess= (perobj:any) =>{

   form.coverImage=perobj;
}
//反填基本信息
 const Getbasic=ref<any>([])
const GetBasicInformation=()=>{

  let productionBatch=route.query.productionBatch
  axios.get("http://localhost:5219/api/Management/GetBasicSession",{
    params:{productionBatch:productionBatch}
  }).then(res=>{
      Getbasic.value.basicInforId=res.data.data.basicInforId
      Getbasic.value.goodsId=res.data.data.goodsId
      Getbasic.value.goodsName=res.data.data.goodsName
      Getbasic.value.productionBatch=res.data.data.productionBatch
      Getbasic.value.shelfLife=res.data.data.shelfLife
      Getbasic.value.license=res.data.data.license
      Getbasic.value.producer=res.data.data.producer
      Getbasic.value.coverImage=res.data.data.coverImage 

/*       Getbasic.value=res.data.data;*/
    

  })
}
//产品检验报告


import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import type { UploadFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)


}
</script>

